<template>
  <div>
      <div class="detail-info-box tab-card">
        <ul>
          <li v-if="(this.responseData.findOrderNo!==null&&this.responseData.findOrderNo!=='')&&(this.$props.roleType===2||this.$props.roleType===1)">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_detailse_applica"></i><span>找库订单</span></p>
            <p>{{this.responseData.findOrderNo}}</p>
          </li>
          <li v-if="this.responseData.storageName!==null&&this.responseData.storageName!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_allocati1"></i><span>入库仓库</span></p>
            <p>{{this.responseData.storageName}}</p>
          </li>
          <li v-if="this.responseData.ownerName!==null&&this.responseData.ownerName!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_pledge"></i><span>货主企业</span></p>
            <p>{{this.responseData.ownerName}}</p>
          </li>
          <li v-if="this.responseData.contactName!==null&&this.responseData.contactName!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>联系人姓名</span></p>
            <p>{{this.responseData.contactName}}</p>
          </li>

          <li v-if="this.responseData.contactPhone!==null&&this.responseData.contactPhone!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_relation"></i><span>联系人电话</span></p>
            <p>{{this.responseData.contactPhone}}</p>
          </li>

          <li v-if="this.responseData.driverName!==null&&this.responseData.driverName!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>司机姓名</span></p>
            <p>{{this.responseData.driverName}}</p>
          </li>
          <li v-if="this.responseData.driverPhone!==null&&this.responseData.driverPhone!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_relation"></i><span>司机电话</span></p>
            <p>{{this.responseData.driverPhone}}</p>
          </li>
          <li v-if="this.responseData.storageContact!==null&&this.responseData.storageContact!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_detailse_funds"></i><span>仓单联系人姓名</span></p>
            <p>{{this.responseData.storageContact}}</p>
          </li>
          <li v-if="this.responseData.storageContactPhone!==null&&this.responseData.storageContactPhone!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_relation"></i><span>仓单联系人电话</span></p>
            <p>{{this.responseData.storageContactPhone}}</p>
          </li>
          <li v-if="this.responseData.clerkName!==null&&this.responseData.clerkName!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_detailse_funds"></i><span>理货员姓名</span></p>
            <p>{{this.responseData.clerkName}}</p>
          </li>
          <li v-if="this.responseData.instoreDate!==null&&this.responseData.instoreDate!==''">
            <p class="card-title"><i class="icon maliiconfont maliicon-img_details_calendar"></i><span>入库日期</span></p>
            <p>{{this.responseData.instoreDate}}</p>
          </li>
            <li v-if="this.responseData.instoreOrderNo!==null&&this.responseData.instoreOrderNo!==''">
              <p class="card-title"><i class="icon maliiconfont maliicon-img_detailse_applica"></i><span>入库单号</span></p>
              <p>{{this.responseData.instoreOrderNo}}</p>
            </li>
            <li v-if="this.responseData.cntrNo!==null&&this.responseData.cntrNo!==''">
              <p class="card-title"><i class="icon maliiconfont maliicon-img_details_cargo1"></i><span>柜号</span></p>
              <p>{{this.responseData.cntrNo}}</p>
            </li>
        </ul>
      </div>
    <div style="width: 948px;margin-left: 10px">
      <egrid border
             max-height="500"
             :column-key-map="{ label: 'name' }"
             :data="this.responseData.instoreDetails"
             :columns="columns"
             propSpan="date"
             :columns-schema="columnsSchema"
             :columns-props="columnsProps"
             :columns-handler="columnsHandler"
             @selection-change="selectionChange">
      </egrid>
    </div>

      <!--<file-upload  :headTitle="'提交入库录单资料'" :headSonTitle="'支持pdf,jpg,png,gif,bmp,xls,xlsx,csv,doc,docx'" @getFileUrls="getFileUrls" ></file-upload>-->
    <div class="fileFrameClass" v-if="(this.isBottombatchFiles||this.isBottominspectionFiles||this.isBottomdeclarationFiles||this.isBottomscanFiles||this.isBottominstoreFiles)">
      <div class="fileHeadTitle">
        <div class="headTitleClass">
        <span>提交入库录单资料</span>
        </div>
        <div class="headSonTitleClass">
          <span>支持pdf,jpg,png,gif,bmp,xls,xlsx,csv,doc,docx</span>
        </div>
      </div>
    </div>

    <file-view :isBottom="this.isBottominstoreFiles" :headTitle="'入库单'" v-if="this.responseData.instoreFiles.length!==0" :fileUrlsArray ="this.responseData.instoreFiles"></file-view>
    <file-view :isBottom="this.isBottomscanFiles" :headTitle="'抄码单'" v-if="this.responseData.scanFiles.length!==0" :fileUrlsArray ="this.responseData.scanFiles"></file-view>
    <file-view :isBottom="this.isBottomdeclarationFiles" :headTitle="'报关单'" v-if="this.responseData.declarationFiles.length!==0" :fileUrlsArray ="this.responseData.declarationFiles"></file-view>
    <file-view :isBottom="this.isBottominspectionFiles" :headTitle="'商检单'" v-if="this.responseData.inspectionFiles.length!==0" :fileUrlsArray ="this.responseData.inspectionFiles"></file-view>
    <file-view :isBottom="this.isBottombatchFiles" :headTitle="'生产批次单'" v-if="this.responseData.batchFiles.length!==0" :fileUrlsArray ="this.responseData.batchFiles"></file-view>
    <div v-if="this.$props.statusType===4&&(this.responseData.ownerRemark!=='货主备注: '||this.responseData.customerRemark!=='客服备注: '||this.responseData.cancelReason!=='取消原因: ')" class="noteClass">
      <div class="singleNoteClass">
        <span>{{this.responseData.ownerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.cancelReason}}</span>
      </div>
    </div>
    <div v-else-if="((this.$props.statusType===3||this.$props.statusType===2)&&(this.responseData.ownerRemark!=='货主备注: '||this.responseData.customerRemark!=='客服备注: '))" class="noteClassConfirm">
      <div class="singleNoteClass">
        <span>{{this.responseData.ownerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
    </div>
    <div>
      <el-row v-if="this.$props.statusType===2 && this.$props.roleType===2" class="btnFrameClass">
        <el-button class="singleBtnClass" type="primary" plain @click="sureInstore">确认入库</el-button>
        <el-button class="singleBtnClass" type="primary" @click="backInstore">打回</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
  import PcDialog from 'components/dialog';
  import Btn from 'src/components/Egrid/cell-viewPic-btn.vue';
  import Data from 'src/components/Egrid/data';
  import fileView from 'src/components/fileUpload/fileView.vue';
  export default {
    components: {
      PcDialog,
      Data,
      fileView
    },
    props: {
      roleType: {
        type: Number
      },
      isAdditionalInformation: {
        type: Boolean
      },
      statusType: {
        type: Number
      },
      detailId: {
        type: String
      },
      version: {
        type: Number
      }
    },
    data() {
      return {
        isBottominstoreFiles: false,
        isBottomscanFiles: false,
        isBottomdeclarationFiles: false,
        isBottominspectionFiles: false,
        isBottombatchFiles: false,
        columns: [
          {name: '货物名称', prop: 'goodsName'},
          {name: '生产厂家', prop: 'vendor'},
          {name: '原产地', prop: 'countryOrigin'},
          {name: '生产日期', prop: 'productDate'},
          {name: '计划入库数量', prop: 'planCount'},
          {name: '实际入库数量', prop: 'actCount'},
          {name: '单位', prop: 'unitName'},
          {name: '计划入库重量(kg)', prop: 'planWeight'},
          {name: '实际入库重量(kg)', prop: 'actWeight'},
          {name: '包装', prop: 'packageName'}
        ],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          width: 70,
          align: 'center'
          // 定义表格列如何渲染
//          component: Editor
        },
        // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性
        columnsSchema: {
        },
        selecetedRows: [],
        propsSpan: ['date'],
        responseData: {
          batchFiles: [
          ],  // 生产批次单数组
          businessType: '',
          cancelReason: '',
          clerkName: '',
          cntrNo: '',
          customerRemark: '',
          declarationFiles: [], // 报关单数组
          driverName: '',
          driverPhone: '',
          contactName: '',
          contactPhone: '',
          storageContact: '',
          storageContactPhone: '',
          findOrderNo: '',
          id: 0,
          inspectionFiles: [],  // 商检单数组
          instoreDate: '',
          instoreDetails: [
            {
              actCount: 0,
              actWeight: 0,
              checkImg: [],
              countryOrigin: '',
              goodsName: '',
              id: 0,
              markImg: [],
              packageName: '',
              planCount: 0,
              planWeight: 0,
              productDate: '',
              unitName: '',
              vendor: ''
            }
          ],
          instoreFiles: [], // 入库单数组
          instoreOrderNo: '',
          ownerName: '',
          ownerRemark: '',
          resource: '',
          scanFiles: [], // 抄码单数组
          status: '',
          storageName: ''
        }
      };
    },
    created() {
      this.getDataInfo();
    },
    methods: {
      getDataInfo() {
        this.ajax({
          type: 'GET',
          url: '/maliwms/instore/instoreDetail/' + this.$props.detailId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.responseData = res.result;
            this.responseData.cancelReason = '取消原因: ' + this.responseData.cancelReason;
            this.responseData.ownerRemark = '货主备注: ' + this.responseData.ownerRemark;
            this.responseData.customerRemark = '客服备注: ' + this.responseData.customerRemark;
            if (this.responseData.batchFiles.length !== 0) {
              this.isBottombatchFiles = true;
            } else {
              this.isBottombatchFiles = false;
              if (this.responseData.inspectionFiles.length !== 0) {
                this.isBottominspectionFiles = true;
              } else {
                this.isBottominspectionFiles = false;
                if (this.responseData.declarationFiles.length !== 0) {
                  this.isBottomdeclarationFiles = true;
                } else {
                  this.isBottomdeclarationFiles = false;
                  if (this.responseData.scanFiles.length !== 0) {
                    this.isBottomscanFiles = true;
                  } else {
                    this.isBottomscanFiles = false;
                    if (this.responseData.instoreFiles.length !== 0) {
                      this.isBottominstoreFiles = true;
                    } else {
                      this.isBottominstoreFiles = false;
                    }
                  }
                }
              }
            }
          }
        });
      },
      columnsHandler (cols) {
        return cols.concat({
          // fixed: 'right',
          label: '查看照片',
          align: 'center',
          component: Btn,
          // listeners 可用于监听自定义组件内部 $emit 出的事件
          listeners: {
//            'row-edit' (row) {
//              console.log('row-edit', row);
//            }
          }
        });
      },
      sureInstore() {
        this.ajax({
          type: 'POST',
          url: '/maliwms/instore/sureInstore',
          data: {id: this.$props.detailId, version: this.$props.version},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.$emit('closeRefresh');
          }
        });
      },
      backInstore() {
        this.ajax({
          type: 'PUT',
          url: '/maliwms/instore/backInstore',
          data: {id: this.$props.detailId, version: this.$props.version},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.$emit('closeRefresh');
          }
        });
      },
      selectionChange (rows) {
        this.selecetedRows = rows;
      },

      clearSelection () {
        const { egrid } = this.$refs;
        if (egrid && egrid.clearSelection) {
          egrid.clearSelection();
        }
      }
    }
  };
</script>
<style scoped>
  .addForm{
    margin-top:10px;
    margin-left: -30px;
    /*width:1000px;*/
  }
  .el-form-item .el-form-item__error {
    /*padding-top: 36px;*/
    /*margin-left: -60px;*/
  }
  .singleBtnClass
  {
    width: 140px;
    height: 40px;
  }
  .detail-info-box{
    width: 948px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-bottom: 20px;
    border: 1px solid #e3e4e5;
    border-right: none;
    border-bottom: none;
    background-color: #fff;
    /*box-shadow:0 15px 20px -2px rgba(19,120,242,0.20);*/
    overflow: hidden;
  }
  .detail-info-box .title {
    font-size: 16px;
    color: #333;
    line-height: 60px;
    position: relative;
    padding-left: 20px;
    border-bottom:1px solid #e3e4e5;
  }
  .detail-info-box .title i {
    padding-right: 10px;
  }
  .tab-card ul li {
    width: 25%;
    height: 100px;
    box-sizing: border-box;
    float: left;
    border-right: 1px solid #e3e4e5;
    border-bottom: 1px solid #e3e4e5;
    padding: 15px 18px;
    background: #fff;
  }

  .tab-card ul li .card-title {
    margin-bottom: 10px;
  }
  .tab-card i.icon {
    color: #ff6c2b;
    font-size: 18px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .tab-card i.icon {
    font-size: 20px;
  }
  .tab-card ul li .card-title span {
    color: #808080;
    vertical-align: middle;
    font-size: 14px;
  }
  .noteClass
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 90px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e3e4e5;
  }
  .noteClassConfirm
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 70px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e3e4e5;
  }
  .singleNoteClass
  {
    color: #333333;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 10px;
  }
  .fileFrameClass
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 80px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e3e4e5;
    border-bottom: none;
  }
  .fileHeadTitle
  {
    width: 948px;
    height: 60px;
    border-bottom: 1px dashed #e3e4e5;
  }
  .headTitleClass
  {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #333333;
  }
  .headSonTitleClass
  {
    margin-left: 20px;
    margin-top: 10px;
    height: 30px;
    font-size: 12px;
    color: #b2b2b2;
  }
  .btnFrameClass
  {
    margin-left: 350px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
</style>
